import React, {memo, useEffect, useState} from 'react';
import AlbumStyle from "./AlbumStyle";
import UnitBox from "../../../../components/part/unitBox/UnitBox";
import SongSheetItem from "../../../../components/part/songSheetItem/SongSheetItem";
import {Pagination} from "antd";
import {AlbumInterface} from "../../../../interface/AlbumInterface";
import {getFavoriteAlbumApi} from "../../../../services/favoriteCount";

type Props = {};
type SongSheetItemType={
  coverUrl:string,
  songName:string,
  releaseTime:string
}

export default memo(function Album(props: Props) {
  const userId:number=parseInt(localStorage.getItem("yf_gaduation_zzmusic_user_id") as string);
  const [albumList,setAlbumList]=useState<AlbumInterface[]>([]);
  const [resultObj,setResultObj]=useState<any>({});
  useEffect(() => {
    getFavoriteAlbumApi({type:2,userId}).then((result:any)=>{
      setAlbumList(result.data.data.data);
      setResultObj(result.data.data);
    },(error)=>{
      console.log(error);
    });
  }, []);
  return (
    <AlbumStyle>
      <UnitBox title={"我收藏的专辑"} isShowLine={true}>
        <>
          <div className="album-content">
            {
              albumList.map((item,index:number)=>{
                return(<SongSheetItem
                  key={index}
                  songName={item.albumSingerName}
                  coverUrl={item.albumCover}
                  releaseTime={item.albumTime}
                  size={222}
                  isShowCover={true}
                  isAmplify={true}
                  id={item.albumId}
                  type={3}
                />)
              })
            }
          </div>
          {/* 使用antd分页器 */}
          <div className="album-bottom-box">
            <Pagination defaultCurrent={resultObj.pageNum}
                        defaultPageSize={resultObj.pageSize}
                        total={resultObj.total} hideOnSinglePage={true}/>
          </div>
        </>
      </UnitBox>
    </AlbumStyle>
  );
});
